<template>
  <basic-container>
    <!-- <el-tabs v-model="activeName">
      <el-tab-pane label="产品序列号追溯" name="产品序列号追溯"> -->
    <div class="header">
      <el-form label-width="100px" :inline="true" :rules="rules" @submit.native.prevent>
        <el-form-item label="工单号:" prop="workOrderNo">
          <el-input placeholder="请选择工单号" v-model="workOrderNo" class="input-with-select" :clearable="true">
            <el-button slot="append" icon="el-icon-search" @click="openWorkOrderNoModal"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="产品序列号:" prop="sequenceNumber">
          <el-input name="sequenceNumber" v-model="sequenceNumber" :clearable="true" @keydown.enter.native="onSubmit"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-divider>基础信息</el-divider>
    <div id="workOrderInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleMenu('isShowWorkOrderInfo')">
          <h4>工单信息</h4>
          <i :class="[isShowWorkOrderInfo ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ workOrderInfoData.length }}条记录</span>
    </div>
    <transition name="forwardTraceBackTo">
      <avue-crud v-show="isShowWorkOrderInfo" :option="workOrderInfoOption" :data="workOrderInfoData" ref="workOrderInfo"></avue-crud>
    </transition>

    <el-divider>生产信息</el-divider>
    <div id="processRouteInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleMenu('isShowProcessRouteInfo')">
          <h4>工艺路线</h4>
          <i :class="[isShowProcessRouteInfo ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ processRouteInfoData.length }}条记录</span>
    </div>
    <transition name="forwardTraceBackTo">
      <avue-crud v-show="isShowProcessRouteInfo" :option="processRouteInfoOption" :data="processRouteInfoData" ref="processRouteInfo"></avue-crud>
    </transition>
    <div id="passingStationInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleMenu('isShowPassingStationInfo')">
          <h4>过站信息</h4>
          <i :class="[isShowPassingStationInfo ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ passingStationInfoData.length }}条记录</span>
    </div>
    <transition name="forwardTraceBackTo">
      <avue-crud v-show="isShowPassingStationInfo" :option="passingStationInfoOption" :data="passingStationInfoData" ref="passingStationInfo"> </avue-crud>
    </transition>
    <div id="buckleMaterialInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleMenu('isShowBuckleMaterialInfo')">
          <h4>扣料信息</h4>
          <i :class="[isShowBuckleMaterialInfo ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ buckleMaterialInfoData.length }}条记录</span>
    </div>
    <transition name="forwardTraceBackTo">
      <avue-crud v-show="isShowBuckleMaterialInfo" :option="buckleMaterialInfoOption" :data="buckleMaterialInfoData" ref="buckleMaterialInfo"></avue-crud>
    </transition>
    <div id="SMTbuckleMaterialInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleMenu('isShowSMTbuckleMaterialInfo')">
          <h4>SMT扣料信息</h4>
          <i :class="[isShowSMTbuckleMaterialInfo ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ SMTbuckleMaterialInfoData.length }}条记录</span>
    </div>
    <transition name="forwardTraceBackTo">
      <avue-crud v-show="isShowSMTbuckleMaterialInfo" :option="SMTbuckleMaterialInfoOption" :data="SMTbuckleMaterialInfoData" ref="SMTbuckleMaterialInfo"></avue-crud>
    </transition>

    <el-divider>品质信息</el-divider>
    <div id="badInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleMenu('isShowBadInfo')">
          <h4>不良信息</h4>
          <i :class="[isShowBadInfo ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ badInfoData.length }}条记录</span>
    </div>
    <transition name="forwardTraceBackTo">
      <avue-crud v-show="isShowBadInfo" :option="badInfoOption" :data="badInfoData" ref="badInfo">
        <template slot-scope="{ row }" slot="confirmationResults">
          <span v-if="row.confirmationResults == 'RELIEVE'">解除不良</span>
          <span v-if="row.confirmationResults == 'REPAIR'">维修</span>
          <span v-if="row.confirmationResults == 'SCRAP'">报废</span>
        </template>
      </avue-crud>
    </transition>
    <div id="repairInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleMenu('isShowRepairInfo')">
          <h4>维修信息</h4>
          <i :class="[isShowRepairInfo ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ repairInfoData.length }}条记录</span>
    </div>
    <transition name="forwardTraceBackTo">
      <avue-crud v-show="isShowRepairInfo" :option="repairInfoOption" :data="repairInfoData" ref="repairInfo"></avue-crud>
    </transition>
    <div id="scrapInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleMenu('isShowScrapInfo')">
          <h4>报废信息</h4>
          <i :class="[isShowScrapInfo ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ scrapInfoData.length }}条记录</span>
    </div>
    <transition name="forwardTraceBackTo">
      <avue-crud v-show="isShowScrapInfo" :option="scrapInfoOption" :data="scrapInfoData" ref="scrapInfo">
        <template slot-scope="{ row }" slot="menu">
          <el-button icon="el-icon-view" size="small" type="text" @click="scrapInfoDetail(row)">详情</el-button>
        </template>
      </avue-crud>
    </transition>

    <el-divider>发货信息</el-divider>
    <div id="deliverGoodsInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleMenu('isShowDeliverGoodsInfo')">
          <h4>发货信息</h4>
          <i :class="[isShowDeliverGoodsInfo ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ deliverGoodsInfoData.length }}条记录</span>
    </div>
    <transition name="forwardTraceBackTo">
      <avue-crud v-show="isShowDeliverGoodsInfo" :option="deliverGoodsInfoOption" :data="deliverGoodsInfoData" ref="deliverGoodsInfo">
        <template slot-scope="{ row }" slot="menu">
          <el-button icon="el-icon-view" size="small" type="text" @click="deliverGoodsInfoDetail(row)">查看发货单</el-button>
        </template>
      </avue-crud>
    </transition>
    <!-- </el-tab-pane>
      <el-tab-pane label="工单追溯" name="工单追溯"></el-tab-pane>
    </el-tabs> -->
    <el-dialog append-to-body :title="modalTitle" :visible.sync="isShowScrapInfoDetail" width="60%">
      <avue-form v-model="scrapInfoForm" :option="scrapInfoDetailOption"></avue-form>
    </el-dialog>
    <el-dialog append-to-body title="发货信息" :visible.sync="isShowDeliverGoodsInfoDetail" width="60%">
      <avue-form v-model="deliverGoodsInfoForm" :option="deliverGoodsInfoDetailOption"></avue-form>
      <avue-crud :option="deliverGoodsListOption" :data="deliverGoodsList"></avue-crud>
    </el-dialog>
    <div v-if="!sideNav" class="box-card-hide" @click="sideNav = true">
      <i class="el-icon-arrow-right"></i>
    </div>
    <el-card v-if="sideNav" class="box-card">
      <div slot="header" class="clearfix">
        <span>目录</span>
        <el-button style="float: right; padding: 3px 3px; cursor: pointer" type="info" icon="el-icon-close" circle @click="sideNav = false"></el-button>
      </div>
      <div class="catalogue">
        基础信息
        <ul>
          <li @click="goToLocation('#workOrderInfo')">工单信息</li>
        </ul>
        生产信息
        <ul>
          <li @click="goToLocation('#processRouteInfo')">工艺路线</li>
          <li @click="goToLocation('#passingStationInfo')">过站信息</li>
          <li @click="goToLocation('#buckleMaterialInfo')">扣料信息</li>
          <li @click="goToLocation('#SMTbuckleMaterialInfo')">SMT扣料信息</li>
        </ul>
        品质信息
        <ul>
          <li @click="goToLocation('#badInfo')">不良信息</li>
          <li @click="goToLocation('#repairInfo')">维修信息</li>
          <li @click="goToLocation('#scrapInfo')">报废信息</li>
        </ul>
        发货信息
        <ul>
          <li @click="goToLocation('#deliverGoodsInfo')">发货信息</li>
        </ul>
      </div>
    </el-card>
    <!-- <el-dialog v-dialogDrag title="目录" :modal-append-to-body="false" :modal="false" :visible.sync="catalogue"> </el-dialog> -->
    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows"></common-modal-template>
  </basic-container>
</template>
<script>
import { getTraceabilityRecord } from '@/api/cloud/cloud_forward-trace-back-to';
import { focusInput } from '@/util/helpers';
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
export default {
  name: 'CloudCloudForwardTraceBackTo',
  components: {
    CommonModalTemplate
  },
  data() {
    return {
      isShowWorkOrderInfo: true,
      isShowProcessRouteInfo: true,
      isShowPassingStationInfo: false,
      isShowBuckleMaterialInfo: false,
      isShowSMTbuckleMaterialInfo: false,
      isShowBadInfo: false,
      isShowRepairInfo: false,
      isShowScrapInfo: false,
      isShowDeliverGoodsInfo: false,
      sideNav: true,
      catalogue: true,
      // activeName: '产品序列号追溯',
      sequenceNumber: '',
      rules: {
        sequenceNumber: [
          {
            required: true,
            trigger: 'submit',
            validator: (rule, value, callback) => {
              callback();
            }
          }
        ]
      },
      workOrderInfoData: [], //工单信息
      workOrderInfoOption: {
        //工单信息表格配置
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        column: [
          {
            label: '产品序列号',
            prop: 'sequenceNumber'
          },
          {
            label: '工单号',
            prop: 'workOrderNo'
          },
          {
            label: '产品编码',
            prop: 'productNo'
          },
          {
            label: '产品名称',
            prop: 'productName'
          },
          {
            label: '产品型号',
            prop: 'productModel'
          },
          {
            label: '生产数量',
            prop: 'productQuantity'
          },
          {
            label: '车间',
            prop: 'workshopName'
          },
          {
            label: '产线',
            prop: 'lineName'
          }
        ]
      },
      processRouteInfoData: [], //工艺路线信息
      processRouteInfoOption: {
        //工艺路线信息表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        column: [
          {
            label: '工站名称',
            prop: 'processRouteName'
          },
          {
            label: '工站类型',
            prop: 'processRouteType',
            dicData: [
              //可做返回类型的转换
              {
                label: '过站',
                value: 'OVERSTATION'
              },
              {
                label: '报工',
                value: 'TIMESHEET'
              },
              {
                label: '测试',
                value: 'TEST'
              },
              {
                label: '老化',
                value: 'AGING'
              },
              {
                label: '包装',
                value: 'PACKING'
              },
              {
                label: '组装',
                value: 'ASSEMBLY'
              },
              {
                label: '上料',
                value: 'FEEDING'
              }
            ]
          },
          {
            label: '是否过站',
            prop: 'isPassed',
            html: true,
            formatter: (val) => {
              if (val.isPassed) {
                return '<span class="text-green">' + '是' + '</span>';
              } else {
                return '<span class="text-red">' + '否' + '</span>';
              }
            }
          }
        ]
      },
      passingStationInfoData: [], //过站信息
      passingStationInfoOption: {
        //过站信息表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        refreshBtn: false,
        columnBtn: false,
        indexLabel: '序号',
        menu: false,
        column: [
          {
            label: '产品序列号',
            prop: 'sequenceNumber'
          },
          {
            label: '工单号',
            prop: 'workOrderNo'
          },
          {
            label: '工序名称',
            prop: 'processRouteName'
          },
          {
            label: '工序类型',
            prop: 'processRouteType',
            dicData: [
              //可做返回类型的转换
              {
                label: '过站',
                value: 'OVERSTATION'
              },
              {
                label: '报工',
                value: 'TIMESHEET'
              },
              {
                label: '测试',
                value: 'TEST'
              },
              {
                label: '老化',
                value: 'AGING'
              },
              {
                label: '包装',
                value: 'PACKING'
              },
              {
                label: '组装',
                value: 'ASSEMBLY'
              },
              {
                label: '上料',
                value: 'FEEDING'
              }
            ]
          },
          {
            label: '过站时间',
            prop: 'passedDateTime'
          },
          {
            label: '过站次数',
            prop: 'passedNumber'
          },
          {
            label: '操作人员',
            prop: 'operatorName'
          },
          {
            label: '过站结果',
            prop: 'passedResult',
            html: true,
            formatter: (val) => {
              if (val.passedResult === 'PASS') {
                return '<span class="text-green">' + 'OK' + '</span>';
              } else {
                return '<span class="text-red">' + 'NG' + '</span>';
              }
            }
          },
          {
            label: '是否自动过站',
            prop: 'isAutoPassed',
            html: true,
            formatter: (val) => {
              if (val.isAutoPassed) {
                return '<span class="text-green">是</span>';
              } else {
                return '<span class="text-red">否</span>';
              }
            }
          },
          {
            label: '车间',
            prop: 'workshopName'
          },
          {
            label: '产线',
            prop: 'productionLineName'
          },
          {
            label: '工位',
            prop: 'workStationName'
          },
          {
            label: '设备',
            prop: 'equipmentName'
          }
        ]
      },
      buckleMaterialInfoData: [], //扣料信息
      buckleMaterialInfoOption: {
        //扣料信息表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        indexLabel: '序号',
        menu: false,
        column: [
          {
            label: '产品序列号',
            prop: 'sequenceNumber'
          },
          {
            label: '扣料工序',
            prop: 'processRouteName'
          },
          {
            label: '扣料数量',
            prop: 'usageQuantity'
          },
          {
            label: '扣料时间',
            prop: 'usageDateTime'
          },
          {
            label: '作业人员',
            prop: 'operatorName'
          },
          {
            label: '包装条码',
            prop: 'packNo'
          },
          {
            label: '包装数量',
            prop: 'packQuantity'
          },
          {
            label: '物料编码',
            prop: 'materialNo'
          },
          {
            label: '物料名称',
            prop: 'materialName'
          },
          {
            label: '物料批次',
            prop: 'materialBatchNo'
          },
          {
            label: '供应商名称',
            prop: 'supplierName'
          }
        ]
      },
      SMTbuckleMaterialInfoData: [], //SMT扣料信息
      SMTbuckleMaterialInfoOption: {
        //SMT扣料信息表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        indexLabel: '序号',
        menu: false,
        column: [
          {
            label: '产品序列号',
            prop: 'sequenceNumber'
          },
          {
            label: '站号',
            prop: 'trackNo'
          },
          {
            label: '扣料数量',
            prop: 'usageQuantity'
          },
          {
            label: '扣料时间',
            prop: 'usageDateTime'
          },
          {
            label: '包装条码',
            prop: 'packNo'
          },
          {
            label: '包装数量',
            prop: 'packQuantity'
          },
          {
            label: '物料编码',
            prop: 'materialNo'
          },
          {
            label: '物料名称',
            prop: 'materialName'
          },
          {
            label: '物料批次',
            prop: 'materialBatchNo'
          },
          {
            label: '供应商名称',
            prop: 'supplierName'
          },
          {
            label: '飞达',
            prop: 'feederCode'
          },
          {
            label: '飞达车',
            prop: 'feederBusCode'
          },
          {
            label: '机台号',
            prop: 'machineCode'
          },
          {
            label: '站位表',
            prop: 'tableCode'
          },
          {
            label: '工单号',
            prop: 'workOrderNo'
          }
        ]
      },
      badInfoData: [], //不良信息
      badInfoOption: {
        //不良信息表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        indexLabel: '序号',
        menu: false,
        column: [
          {
            label: '产品序列号',
            prop: 'sequenceNumber'
          },
          // {
          //   label: '不良次数',
          //   prop: 'processingTimes'
          // },
          {
            label: '不良生产工序',
            prop: 'processRouteName'
          },
          {
            label: '不良代码',
            prop: 'defectiveCode'
          },
          {
            label: '不良现象描述',
            prop: 'phenomenonDescription'
          },
          {
            label: '不良登记人员',
            prop: 'registrant'
          },
          {
            label: '不良登记时间',
            prop: 'registrationTime'
          },
          {
            label: '不良确认结果',
            prop: 'confirmationResults'
          },
          {
            label: '不良确认人员',
            prop: 'confirmedBy'
          },
          {
            label: '不良确认时间',
            prop: 'confirmTime'
          },
          {
            label: '不良原因大类',
            prop: 'reason'
          },
          {
            label: '不良原因小类',
            prop: 'subReason'
          }
        ]
      },
      repairInfoData: [], //维修信息
      repairInfoOption: {
        //维修信息表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        indexLabel: '序号',
        menu: false,
        column: [
          {
            label: '产品序列号',
            prop: 'sequenceNumber'
          },
          {
            label: '维修次数',
            prop: 'repairTimes'
          },
          {
            label: '不良产生工序',
            prop: 'processRouteName'
          },
          {
            label: '进维修类型',
            prop: 'incomingType',
            html: true,
            formatter: (val) => {
              if (val.incomingType == 'AUTO') {
                return '<span>' + '自动' + '</span>';
              } else if (val.incomingType == 'MANUAL') {
                return '<span>' + '手动' + '</span>';
              }
            }
          },
          {
            label: '进维修时间',
            prop: 'incomingTime'
          },
          {
            label: '维修执行人员',
            prop: 'maintainer'
          },
          {
            label: '维修代码',
            prop: 'repairCode'
          },
          {
            label: '维修完成时间',
            prop: 'completeTime'
          },
          {
            label: '维修结果',
            prop: 'results',
            html: true,
            formatter: (val) => {
              if (val.results === '1') {
                return '<span class="text-red">' + '不合格' + '</span>';
              } else if (val.results === '0') {
                return '<span class="text-green">' + '合格' + '</span>';
              } else {
                return '<span class="text-yellow">' + '维修中' + '</span>';
              }
            }
          }
        ]
      },
      scrapInfoData: [], //报废信息
      scrapInfoOption: {
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        indexLabel: '序号',
        menu: true,
        menuWidth: 100,
        column: [
          {
            label: '产品序列号',
            prop: 'sequenceNumber'
          },
          {
            label: '报废单号',
            prop: 'docNo'
          },
          {
            label: '报废类型',
            prop: 'scrapType',
            html: true,
            formatter: (val) => {
              if (val.scrapType === 'PRODUCT') {
                return '产品报废';
              } else {
                return '维修报废';
              }
            }
          },
          {
            label: '报废确认时间',
            prop: 'scrapTime'
          },
          {
            label: '报废确认人员',
            prop: 'scrapperName'
          }
        ]
      },
      isShowScrapInfoDetail: false, //报废详情模态框是否显示
      modalTitle: '',
      scrapInfoForm: {}, //报废详情信息
      scrapInfoDetailOption: {
        //报废详情表单配置
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 200,
        column: [
          {
            label: '产品序列号',
            prop: 'sequenceNumber',
            disabled: false
          },
          {
            label: '报废类型',
            prop: 'scrapType',
            disabled: false
          },
          {
            label: '不良产生工序',
            prop: 'defectiveRouteName',
            disabled: false
          },
          {
            label: '不良代码',
            prop: 'defectiveCode',
            disabled: false
          },
          {
            label: '不良登记人员',
            prop: 'defectiveRegistrant',
            disabled: false
          },
          {
            label: '不良登记时间',
            prop: 'defectiveRegisterTime',
            disabled: false
          },
          {
            label: '不良现象描述',
            prop: '',
            type: 'defectivePhenomenonDesc',
            span: 24,
            maxRows: 3,
            minRows: 3,
            disabled: false
          },
          {
            label: '工单号',
            prop: 'workOrderNo',
            disabled: false
          },
          {
            label: '车间',
            prop: 'workShopName',
            disabled: false
          },
          {
            label: '产线',
            prop: 'productionLine',
            disabled: false
          },
          {
            label: '产品名称',
            prop: 'productName',
            disabled: false
          },
          {
            label: '产品编码',
            prop: 'productNo',
            disabled: false
          },
          {
            label: '产品型号',
            prop: 'productModel',
            disabled: false
          },
          {
            label: '不良原因大类',
            prop: 'defectiveReason',
            disabled: false,
            display: this.modalTitle === '产品报废详情' ? true : false
          },
          {
            label: '不良原因小类',
            prop: 'defectiveSubReason',
            disabled: false,
            display: this.modalTitle === '产品报废详情' ? true : false
          },
          {
            label: '不良确认人员',
            prop: 'defectiveConfirmedBy',
            disabled: false,
            display: this.modalTitle === '产品报废详情' ? true : false
          },
          {
            label: '不良确认时间',
            prop: 'defectiveConfirmTime',
            disabled: false,
            display: this.modalTitle === '产品报废详情' ? true : false
          },
          {
            label: '进维修时间',
            prop: 'incomingRepairTime',
            disabled: false,
            display: this.modalTitle === '产品报废详情' ? true : false
          },
          {
            label: '维修执行人员',
            prop: 'maintainerName',
            disabled: false,
            display: this.modalTitle === '产品报废详情' ? true : false
          },
          {
            label: '维修代码',
            prop: 'repairCode',
            disabled: false,
            display: this.modalTitle === '产品报废详情' ? true : false
          },
          {
            label: '维修完成时间',
            prop: 'repairCompleteTime',
            disabled: false,
            display: this.modalTitle === '产品报废详情' ? true : false
          },
          {
            label: '报废原因',
            prop: 'reason',
            disabled: false
          }
        ]
      },
      deliverGoodsInfoData: [], //发货信息
      deliverGoodsInfoOption: {
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        indexLabel: '序号',
        menu: false,
        column: [
          {
            label: '发货单号',
            prop: 'no'
          },
          {
            label: '包装条码',
            prop: 'packNo'
          },
          {
            label: '包装数量',
            prop: 'packQuantity'
          },
          {
            label: '产品编码',
            prop: 'productNo'
          },
          {
            label: '产品名称',
            prop: 'productName'
          },
          {
            label: '产品型号',
            prop: 'productModel'
          },
          {
            label: '客户名称',
            prop: 'partner'
          },
          {
            label: '发货人员',
            prop: 'consignor'
          },
          {
            label: '发货时间',
            prop: 'deliveryTime'
          }
        ]
      },
      isShowDeliverGoodsInfoDetail: false, //是否显示发货信息详情
      deliverGoodsInfoForm: {},
      deliverGoodsInfoDetailOption: {
        //发货信息详情
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 100,
        column: [
          {
            label: '发货单号',
            prop: 'no',
            disabled: false
          },
          {
            label: '客户名称',
            prop: 'partner',
            disabled: false
          },
          {
            label: '发货人员',
            prop: 'consignor',
            disabled: false
          },
          {
            label: '发货时间',
            prop: 'deliveryTime',
            disabled: false
          }
        ]
      },
      deliverGoodsListOption: {
        //发货详情表格配置
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        indexLabel: '序号',
        menu: false,
        column: [
          {
            label: '产品编码',
            prop: 'productNo'
          },
          {
            label: '产品名称',
            prop: 'productName'
          },
          {
            label: '产品规格',
            prop: 'productModel'
          },
          {
            label: '客户料号',
            prop: 'partner'
          },
          {
            label: '单位',
            prop: 'uom'
          },
          {
            label: '需求数量',
            prop: 'requiredQuantity'
          },
          {
            label: '已出库数量',
            prop: 'issuedQuantity'
          },
          {
            label: '备注',
            prop: 'remark'
          }
        ]
      },
      workOrderNo: '',
      tableOption: {}
    };
  },
  mounted() {
    if (this.$route.query.sequenceNumber) {
      this.sequenceNumber = this.$route.query.sequenceNumber;
      this.onSubmit();
    }
    focusInput('sequenceNumber');
  },
  methods: {
    onSubmit() {
      if (!this.sequenceNumber) {
        this.$message({
          type: 'warning',
          message: '请选择产品序列号！'
        });
        return;
      }
      let params = {
        workOrderNo: this.workOrderNo ? this.workOrderNo : undefined,
        productSequenceNumber: this.sequenceNumber,
        traceType: 'FORWARD'
      };
      getTraceabilityRecord(params).then(
        (res) => {
          this.workOrderInfoData = this._get(res, 'data.data.traceWorkOrderList', []);
          this.processRouteInfoData = this._get(res, 'data.data.routeList', []);
          this.passingStationInfoData = this._get(res, 'data.data.routeDetailList', []);
          this._forEach(this.passingStationInfoData, (item) => {
            let equipment = '';
            let equipmentName = [];
            if (item.equipments && item.equipments != null) {
              equipment = JSON.parse(item.equipments);
              this._forEach(equipment, (equipmentItem) => {
                equipmentName.push(equipmentItem.name);
                item['equipmentName'] = equipmentName.join(',');
              });
            } else {
              item['equipmentName'] = '';
            }
          });
          this.buckleMaterialInfoData = this._get(res, 'data.data.materialUsageList', []);
          this.SMTbuckleMaterialInfoData = this._get(res, 'data.data.smtMaterialUsageList', []);
          this.badInfoData = this._get(res, 'data.data.defectiveProductInfoList', []);
          this.repairInfoData = this._get(res, 'data.data.repairInfoList', []);
          this.scrapInfoData = this._get(res, 'data.data.scrapInfoList', []);
          this.deliverGoodsInfoData = this._get(res, 'data.data.deliveryInfoList', []);
        },
        (error) => {}
      );
    },
    /**
     * 查看报废信息详情
     */
    scrapInfoDetail(row) {
      this.isShowScrapInfoDetail = true;
      this.scrapInfoForm = row;
      if (row.scrapType === 'PRODUCT') {
        this.modalTitle = '产品报废详情';
      } else {
        this.modalTitle = '维修报废详情';
      }
    },
    /**
     * 查看发货信息详情
     */
    deliverGoodsInfoDetail(row) {
      this.isShowDeliverGoodsInfoDetail = true;
      this.deliverGoodsInfoForm.no = row.no;
      this.deliverGoodsInfoForm.partner = row.partner;
      this.deliverGoodsInfoForm.consignor = row.consignor;
      this.deliverGoodsInfoForm.deliveryTime = row.deliveryTime;
      this.deliverGoodsList = row.details;
    },
    /**
     * 页面内定位表格
     */
    goToLocation(type) {
      switch (type) {
        case '#workOrderInfo':
          this.isShowWorkOrderInfo = true;
          break;
        case '#processRouteInfo':
          this.isShowProcessRouteInfo = true;
          break;
        case '#passingStationInfo':
          this.isShowPassingStationInfo = true;
          break;
        case '#buckleMaterialInfo':
          this.isShowBuckleMaterialInfo = true;
          break;
        case '#SMTbuckleMaterialInfo':
          this.isShowSMTbuckleMaterialInfo = true;
          break;
        case '#badInfo':
          this.isShowBadInfo = true;
          break;
        case '#repairInfo':
          this.isShowRepairInfo = true;
          break;
        case '#scrapInfo':
          this.isShowScrapInfo = true;
          break;
        case '#deliverGoodsInfo':
          this.isShowDeliverGoodsInfo = true;
          break;
        default:
          break;
      }
      $('#avue-view').animate(
        {
          scrollTop: $(type).offset().top + $('#avue-view').scrollTop() - 110
        },
        500
      );
    },
    toggleMenu(type) {
      this[type] = !this[type];
    },
    /**
     * 打开工单选择模态框
     */
    openWorkOrderNoModal() {
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '选择工单号（双击进行选择）',
        url: '/api/mes-cloud/workorder/page?workOrderStatus=1,2,3,4,5',
        isPage: true,
        rowSelectionType: 'single',
        columnDefs: [
          {
            label: '生产订单',
            prop: 'productionOrderNo',
            search: true
          },
          {
            label: '生产工单',
            prop: 'orderNo',
            search: true
          },
          {
            label: '工单类型',
            prop: 'orderType',
            type: 'select'
          },
          {
            label: '工单数量',
            prop: 'planQuantity'
          },
          {
            label: '产品编码',
            prop: 'partNo'
          },
          {
            label: '产品名称',
            prop: 'partName'
          },
          {
            label: 'BOM版本',
            prop: 'bomVersion'
          },
          {
            label: '派工产线',
            prop: 'productionLineName'
          },
          {
            label: '计划开始时间',
            prop: 'planStartDate'
          },
          {
            label: '计划结束时间',
            prop: 'planEndDate'
          },
          {
            label: '制定人',
            prop: 'creatorName'
          },
          {
            label: '状态',
            prop: 'status',
            type: 'select',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            dicUrl: '/api/blade-system/dict/dictionary?code=mfg_work_order'
          },
          {
            label: '备注',
            prop: 'remark'
          }
        ]
      };
    },
    /**
     * 获取选中工单号
     */
    getSelectedRows(rowData) {
      this.workOrderNo = rowData.orderNo;
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  align-items: center;
  height: 35px;
  .titleLeft {
    display: flex;
    align-items: center;
    .titleName {
      user-select: none;
      display: flex;
      align-items: center;
      cursor: pointer;
      .arrowRight {
        transform: rotate(0);
        transition: all 0.2s;
        &.arrowDown {
          transform: rotate(90deg);
          transition: all 0.2s;
        }
      }
    }
  }
  span {
    color: #0995bb;
  }
}
::v-deep .el-card__body {
  .avue-crud__menu {
    display: none;
  }
}
::v-deep .el-table {
  margin-bottom: 25px;
}
.box-card {
  position: absolute;
  top: 30%;
  right: 1%;
  width: 10%;
  min-width: 170px;
  height: 55%;
  z-index: 9999;
  .catalogue {
    user-select: none;
    ul {
      margin-left: -10px;
      li {
        list-style: disc;
        line-height: 25px;
        cursor: pointer;
      }
    }
  }
}
.box-card-hide {
  position: absolute;
  top: 30%;
  right: 1%;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  cursor: pointer;
  z-index: 9999;
}
::v-deep .el-form-item__content {
  line-height: 32px;
}

.forwardTraceBackTo-enter-active,
.forwardTraceBackTo-leave-active {
  transition: opacity 0.2s;
}
.forwardTraceBackTo-enter,
.forwardTraceBackTo-leave-to {
  opacity: 0;
}
</style>
